<!-- AppPortfolio.vue - 作品集组件 -->
<template>
  <!-- 作品集区块 -->
  <section class="portfolio section" id="portfolio">
    <!-- 区块标题，使用i18n国际化 -->
    <h2 class="section__title">{{ $t('portfolio__title') }}</h2>
    <!-- 区块副标题，使用i18n国际化 -->
    <span class="section__subtitle">{{ $t('portfolio__subtitle') }}</span>

    <!-- 作品集轮播容器 -->
    <div class="portfolio__container container swiper-container">
      <!-- Swiper轮播组件 -->
      <swiper class="swiper" 
        :modules="modules" 
        :slides-per-view="1" 
        :space-between="30"
        :loop="true" 
        :pagination="{ clickable: true }" 
        navigation>
        <!-- 遍历作品列表 -->
        <swiper-slide v-for="(item,index) in portfolioList" :key="index">
          <!-- 作品内容卡片 -->
          <div class="portfolio__content grid swiper-slide">
            <!-- 作品预览图 -->
            <img :src="item.img" alt="" class="portfolio__img" />

            <!-- 作品信息 -->
            <div class="portfolio_">
              <!-- 作品标题，使用i18n国际化 -->
              <h3 class="portfolio__title" i18n="portfolio1__title">
                {{ $t(item.title) }}
              </h3>
              <!-- 作品描述，使用i18n国际化 -->
              <p class="portfolio__description" i18n="portfolio1__description">
                {{ $t(item.describe) }}
              </p>
              <!-- 作品演示链接 -->
              <a :href="item.url" target="_blank"
                class="button button--flex button--small portfolio__button">
                访问
                <i class="alicon alicon-zhixiangyou button__icon"></i>
              </a>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </section>
</template>

<script>
// 导入Vue组件定义和响应式API
import { defineComponent,ref } from 'vue'
// 导入Swiper相关组件和样式
import { Pagination, Navigation } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

export default defineComponent({
  name: 'AppPortfolio',
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    // 作品列表数据
    const portfolioList = ref([
      {
        url: 'https://asset.zichan.xyz/',
        title: 'portfolio1__title',
        describe: 'portfolio1__description',
        img: '/img/portfolio1.jpg'
      },
      {
        url: 'https://mood.zichan.xyz/',
        title: 'portfolio2__title',
        describe: 'portfolio2__description',
        img: '/img/portfolio2.jpg'
      }
    ])
    return {
      modules: [Pagination, Navigation], // Swiper模块配置
      portfolioList
    }
  },
})
</script>

<style lang="scss" scoped>
/* 作品集样式 */
.portfolio {
  /* 容器样式 */
  &__container {
    overflow: initial;
  }

  /* 作品内容卡片样式 */
  &__content {
    padding: 0 1.5rem;
    /* 平板设备网格布局 */
    @include min-screen(568px) {
      grid-template-columns: repeat(2, 1fr);
    }
    /* 桌面设备垂直对齐 */
    @include min-screen(768px) {
      align-items: center;
    }
    /* 大屏幕设备间距调整 */
    @include min-screen(1024px) {
      column-gap: 5rem;
    }
  }

  /* 作品预览图样式 */
  &__img {
    width: 265px;
    border-radius: 0.5rem;
    justify-self: center;
    /* 桌面设备图片尺寸调整 */
    @include min-screen(768px) {
      width: 320px;
    }
  }

  /* 作品标题样式 */
  &__title {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-0-5);
  }

  /* 作品描述样式 */
  &__description {
    margin-bottom: var(--mb-0-75);
  }

  /* 按钮图标悬停效果 */
  &__button:hover .button__icon {
    transform: translateX(0.25rem);
  }
}

/* Swiper导航按钮样式 */
::v-deep .swiper-button-next:after, 
::v-deep .swiper-button-prev:after {
  font-size: 1.5rem;
  color: var(--first-color);
}

/* Swiper分页器激活状态样式 */
::v-deep .swiper-pagination-bullet-active {
  background-color: var(--first-color);
}

/* 全局标题样式美化 */
.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: var(--mb-1);
  font-weight: var(--font-semi-bold);
  position: relative;
  padding-bottom: 0.5rem;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--first-color);
    border-radius: 2px;
  }
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-3);
  text-align: center;
  color: var(--text-color-light);
}
</style>